import { computed, defineComponent, onMounted, PropType, Ref, ref, shallowRef } from 'vue';
import * as eCharts from 'echarts';
import { Data } from '@/domain/dataBoard/types/tend';
import Styles from './lineChart.module.less';

/**
 * @description 生成单个折线图，通过 className 配置折线图样式
 */
export default defineComponent({
  name: 'lineChart',
  props: {
    dataset: {
      type: Array as PropType<Data>,
      default() {
        return [];
      },
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    },
    style: {
      type: Object as PropType<{ [key: string]: string | number }>,
      default() {
        return {};
      }
    }
  },
  setup(props) {
    const myEChart: Ref<eCharts.EChartsType | null> = shallowRef(null);
    const eChartContainerRef: Ref<HTMLElement | null> = ref(null);

    const dataSet = computed(() => {
      const data = props.dataset;

      if (!data.length) return [];
      const result: (string | number)[][] = Array.from(new Array(data[0].trend_data.length + 1)).map(() => new Array(data.length + 1));
      result[0][0] = 'product';
      data.forEach((xItem, xIndex) => {
        result[0][xIndex + 1] = xItem.show_text;
        xItem.trend_data?.forEach((yItem, yIndex) => {
          result[yIndex + 1][0] = yItem.trend_title;
          result[yIndex + 1][xIndex + 1] = yItem.trend_num;
        });
      });

      return result;
    });

    const getOption = () => {
      if (!dataSet.value?.length) {
        return {};
      }
      const seriesParam = new Array(dataSet.value[0].length - 1).fill({
        type: 'line',
        emphasis: {
          focus: 'none'
        }
      });

      return {
        title: {
          text: props.title,
          textAlign: 'left',
          textStyle: {
            color: '#000',
            fontWeight: 'normal',
            fontSize: 14,
            margin: 0
          }
        },
        legend: {
          bottom: 20
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: 'rgba(255, 255, 255, 0.8)'
        },
        grid: {
          left: 'left',
          right: '10px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            nameTextStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontFamily: 'MicrosoftYaHei',
              fontSize: 14
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}.00%'
            },
            // minorSplitLine: {
            //   show: true
            // },
            nameTextStyle: {
              color: '#000',
              fontWeight: 'normal',
              fontSize: 14
            }
          }
        ],
        dataset: {
          source: dataSet.value
        },
        series: seriesParam
      };
    };

    onMounted(() => {
      if (props.dataset.length) {
        if (myEChart.value) {
          myEChart.value.dispose();
        }
        myEChart.value = eCharts.init(eChartContainerRef.value!);
        myEChart.value.setOption(getOption());
      }
    });

    return () => <div class={[Styles.container, props.className]} style={props.style} ref={eChartContainerRef}></div>;
  }
});
